<template>
	<div class="template-manage-page">
		<div class="rule-template-page">
			<!-- 搜索区域 -->
			<el-form inline :model="searchForm" class="search-form">
				<el-form-item label="创建时间：">
					<el-input v-model="searchForm.createTime" placeholder="请选择时间范围" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary">搜索</el-button>
					<el-button>重置</el-button>
				</el-form-item>
			</el-form>

			<!-- 新增按钮 -->
			<el-button type="primary" class="add-btn">新增</el-button>

			<!-- 表格区域 -->
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column prop="index" label="序号" />
				<el-table-column prop="ruleTemplate" label="规则模板" />
				<el-table-column prop="createTime" label="创建时间" />
				<el-table-column label="操作">
					<template #default>
						<el-button type="primary" size="mini">编辑</el-button>
						<el-button type="danger" size="mini">删除</el-button>
						<el-button type="primary" size="mini">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'RuleTemplateManagement',
		data() {
			return {
				searchForm: {
					createTime: ''
				},
				tableData: [{
						index: 1,
						ruleTemplate: '平均分类励规则',
						createTime: '2025-09-13'
					},
					{
						index: 2,
						ruleTemplate: '设置名额奖励模板',
						createTime: '2025-09-13'
					}
				]
			}
		}
	}
</script>

<style scoped>
	.template-manage-page {
		padding: 20px;
		background-color: #f9f9f9;
	}

	.search-form {
		margin-bottom: 20px;
	}

	.add-btn {
		margin-bottom: 20px;
	}

	.el-button--mini {
		margin-right: 5px;
	}
</style>